// ======================= 1. 验证码功能 =======================

// 生成随机验证码函数
function randomCode(length = 4) {  
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let code = ""; 
  for (let i = 0; i < length; i++) { 
    code += chars.charAt(Math.floor(Math.random() * chars.length)); 
  }
  return code;
}

// 绘制验证码到 canvas
function drawCaptcha() {
  const canvas = document.getElementById("captchaCanvas"); 
  const ctx = canvas.getContext("2d"); 
  const code = randomCode(); // 生成随机验证码字符串

  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.fillStyle = "#f5f5f5"; // 设置背景色
  ctx.fillRect(0, 0, canvas.width, canvas.height); 

  ctx.font = "20px Arial"; // 设置字体大小和字体
  ctx.fillStyle = "#333";  // 设置字体颜色
  ctx.textBaseline = "middle"; // 文字垂直居中
  ctx.fillText(code, 15, canvas.height / 2); 

  // 绘制干扰线
  for (let i = 0; i < 3; i++) { // 绘制 3 条随机线条
    ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; // 随机颜色
    ctx.beginPath(); // 开始路径
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height); // 随机起点
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height); // 随机终点
    ctx.stroke(); // 绘制路径
  }

  canvas.dataset.code = code; // 把验证码存储在 canvas 的自定义属性中，便于后续验证
}

// 页面加载完毕后初始化验证码
document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.getElementById("captchaCanvas"); 
  drawCaptcha();
  canvas.addEventListener("click", drawCaptcha); // 点击画布时刷新验证码
});


// ======================= 2. 月薪滑动条功能 =======================

// 获取展示工资的 span 元素
var msg = document.getElementById("msg"); // 根据 id="msg" 找到 span 元素
var paidInput = document.getElementById("paid"); 
var form = document.querySelector("form"); 

// 页面加载完成后，显示滑动条初始值
window.onload = function () {
  msg.innerHTML = paidInput.value; 
};

// 当滑动条的值发生变化时，更新 span 的显示
paidInput.oninput = function () { 
  msg.innerHTML = this.value;
};

// 当表单重置时，让滑块回到最小值，并更新显示的数值
form.addEventListener("reset", function () {
  setTimeout(() => {
    paidInput.value = paidInput.min; 
    msg.innerHTML = paidInput.min;
  });
});
